<template>
  <el-input
    v-model="keywords"
    :placeholder="$t('请输入关键词')"
    class="search-input"
  >
    <el-button slot="append" @click="search" icon="el-icon-search"></el-button>
  </el-input>
</template>
<script>
export default {
  data() {
    return {
      keywords: ''
    }
  },
  created() {},
  methods: {
    search() {
      this.$emit('search', this.keywords)
    }
  }
}
</script>
<style scoped lang="scss">
.search-input.el-input ::v-deep {
  .el-input__inner {
    border-radius: 60px 0 0 60px;
    border: none;
    background-color: #f2f3f5;
  }
  .el-input-group__append {
    width: 30px;
    height: 30px;
    border-radius: 0 60px 60px 0;
    border: none;
    background-color: #f2f3f5;
    color: #4e5969;
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
